<template>
  <div class="warning_list">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="自动分析" name="first">
        <div class="radio">
          <el-radio v-model="radio" label="1" @change="handleRadioChange">短临分析</el-radio>
          <el-radio v-model="radio" label="2" @change="handleRadioChange">短期分析</el-radio>
        </div>
        <div class="dlfx" v-if="flag1">
          <div class="dlfx_title">短临分析</div>
          <div class="dlfx_contain">
            <div class="date">
              <span>预警日期</span>
              <el-date-picker v-model="value1" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="times">
              <span>预警时次</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="ageing">
              <span>预警时效</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="btn">
              <el-button>分析成图</el-button>
              <div class="ch">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>显示格点</span>
              </div>
            </div>
          </div>
        </div>
        <div class="dqfx" v-if="flag2">
          <div class="dqfx_title">短期分析</div>
          <div class="dqfx_contain">
            <div class="date">
              <span>预警日期</span>
              <el-date-picker v-model="value1" style="width:180px" type="date" placeholder="选择日期">
              </el-date-picker>
              <el-time-select v-model="values1" style="width:30px" :picker-options="{
                start: '08:00',
                step: '01:00',
                end: '18:00'
              }" placeholder="选择时间">
              </el-time-select>
            </div>
            <div class="product">
              <span>预报产品</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="btn">
              <el-button>分析成图</el-button>
              <div class="ch">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>显示格点</span>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="手动标绘" name="second">
        <div class="one">
          <div class="button">
            <el-button>1小时累计雨量</el-button>
            <el-button>雷达图</el-button>
            <el-button>3小时累计雨量</el-button>
            <el-button>云图</el-button>
            <el-button>24小时累计雨量</el-button>
            <el-button>精细化预报</el-button>
            <el-button>实况雨量</el-button>
            <el-button>城镇预报</el-button>
          </div>
          <div class="check">
            <div class="check1">
              <el-checkbox v-model="checked1"></el-checkbox>
              <span>易发分区图</span>
            </div>
            <div class="check2">
              <el-checkbox v-model="checked2"></el-checkbox>
              <span>灾害分布图</span>
            </div>
          </div>
        </div>
        <div class="two_titl">选择区域等级</div>
        <div class="two">
          <div class="draw">
            <div class="word">绘制</div>
            <div class="color">
              <el-button>红色</el-button>
              <el-button>橙色</el-button>
              <el-button>黄色</el-button>
              <el-button>蓝色</el-button>
            </div>
          </div>
          <div class="btn">
            <el-button>行政裁剪</el-button>
            <el-button>自动确认</el-button>
            <el-button>乡镇刷新</el-button>
            <el-button>区域确认</el-button>
            <el-button>清空预警区</el-button>
            <el-button>查找空位区</el-button>
          </div>
          <div class="change">
            <div class="word">修改</div>
            <div class="color">
              <el-button>红色</el-button>
              <el-button>橙色</el-button>
              <el-button>黄色</el-button>
              <el-button>蓝色</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="center">
      <span>预警区调整</span>
      <el-button>修改预警区</el-button>
    </div>
    <div class="examine">
      <div class="tab">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="country" label="乡镇" width="120">
          </el-table-column>
          <el-table-column prop="area" label="预警区域" width="120">
          </el-table-column>
          <el-table-column prop="level" label="预警等级">
          </el-table-column>
        </el-table>
      </div>
      <div class="exam_title">提交审核</div>
      <div class="exam">
        <div class="select">
          <span>地理信息</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button>提交审核</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      radio: '1',
      value1: '',
      options1: [{
        value: '选项1',
        label: '13'
      }],
      options2: [{
        value: '选项1',
        label: ''
      }],
      options3: [{
        value: '选项1',
        label: '精细化预报'
      }],
      options4: [{
        value: '选项1',
        label: ''
      }],
      value: '选项1',
      values1: '',
      checked: true,
      checked1: false,
      checked2: false,
      flag1: true,
      flag2: false,
      tableData: [{
        country: '',
        area: '',
        level: ''
      }]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRadioChange() {
      if (this.radio == "1") {
        this.flag1 = true
        this.flag2 = false
      } else if (this.radio == "2") {
        this.flag1 = false
        this.flag2 = true
      }
    }
  }
};
</script>
<style scoped lang="less">
.warning_list {
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}

.warning_list /deep/ .el-tabs__header {
  margin: 0;
}

.warning_list /deep/ .el-tabs__content {
  border: 1px solid;
}

.warning_list .el-tabs {
  .radio {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dlfx {
    width: 100%;

    .dlfx_contain {
      width: 100%;
      height: 250px;
      border: 1px solid;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
      box-sizing: border-box;

      .btn {
        width: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .date,
      .times,
      .ageing {
        margin-bottom: 10px;
      }
    }
  }

  .dqfx {
    width: 100%;

    .dqfx_contain {
      width: 100%;
      height: 250px;
      border: 1px solid;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
      box-sizing: border-box;

      .btn {
        width: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .date {
        width: 300px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .product {
        width: 280px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
    }
  }

  .one {
    width: 100%;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;

    .button {
      width: 300px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 10px;

      .el-button {
        margin: 0;
        width: 140px;
        margin-top: 10px;
      }
    }

    .check {
      width: 200px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }

  .two {
    width: 100%;
    padding: 10px 5px 20px;
    box-sizing: border-box;
    border: 1px solid;
    display: flex;
    justify-content: space-between;

    .draw,
    .change {
      width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .word {
        margin-bottom: 5px;
      }

      .color {
        width: 100%;

        .el-button {
          width: 100%;
          margin: 0;
        }
      }
    }

    .btn {
      width: 210px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 25px;

      .el-button {
        margin: 0 0 10px;
        width: 100px;
      }
    }
  }
}

.warning_list .center {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    margin-right: 20px;
  }
}

.warning_list .examine {
  width: 100%;
  border: 1px solid;

  .tab {
    width: 100%;
    height: 200px;
  }

  .exam {
    width: 100%;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select {
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
    }

    .el-button {
      margin-bottom: 10px;
    }

  }
}</style>